<template>
  <div class="modify-pwd-container">
    <h1>修改密码</h1>
    <el-form :model="form" ref="formRef" label-width="90px" class="modify-pwd-form">
      <el-form-item label="原密码">
        <el-input v-model="form.oldPwd" type="password" show-password autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="form.newPwd" type="password" show-password autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" class-name="no-wrap-label">
        <el-input v-model="form.confirmPwd" type="password" show-password autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const formRef = ref()
const form = reactive({
  oldPwd: '',
  newPwd: '',
  confirmPwd: ''
})

// 假设用户id存储在localStorage
const userId = Number(localStorage.getItem('userId') || 0)

const submitForm = async () => {
  // 收集所有验证错误
  const errors = []
  
  // 检查原密码是否填写
  if (!form.oldPwd) {
    errors.push('请输入原密码')
  }
  
  // 检查新密码是否填写
  if (!form.newPwd) {
    errors.push('请输入新密码')
  } else if (form.newPwd.length < 6) {
    // 检查新密码长度
    errors.push('新密码长度不能少于6位')
  } else if (form.newPwd === form.oldPwd) {
    // 检查新密码与原密码是否相同
    errors.push('新密码不能与原密码相同')
  }
  
  // 检查确认密码
  if (!form.confirmPwd) {
    errors.push('请确认新密码')
  } else if (form.confirmPwd !== form.newPwd) {
    errors.push('两次输入的新密码不一致')
  }
  
  // 如果有错误，显示alert弹窗
  if (errors.length > 0) {
    alert(errors.join('\n'))
    return
  }
  
  try {
    // 先获取用户信息，获取用户名
    const res = await axios.post(`http://localhost:8080/api/v1/users/GetUserInfo/${userId}`)
    if (res.data.code !== 200) {
      ElMessage.error('获取用户信息失败')
      return
    }
    const user = res.data.data
    
    // 调用重置密码接口
    const resetRes = await axios.post(
      `http://localhost:8080/api/v1/users/resetpwd/${userId}/${form.newPwd}`
    )
    if (resetRes.data.code === 200) {
      ElMessage.success('密码修改成功')
      resetForm()
    } else {
      ElMessage.error(resetRes.data.message || '密码修改失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，请稍后重试')
  }
}

const resetForm = () => {
  form.oldPwd = ''
  form.newPwd = ''
  form.confirmPwd = ''
}
</script>

<style lang="less" scoped>
// 全局样式变量
@container-width: 500px;
@container-padding: 32px 40px;
@border-radius: 8px;
@box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
@bg-color: #fff;
@form-item-margin: 24px 0;
@input-height: 40px;
@btn-padding: 8px 20px;

/* 新增样式：使整个页面成为弹性容器并居中内容 */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.modify-pwd-container {
  max-width: @container-width;
  width: 100%;
  background: @bg-color;
  border-radius: @border-radius;
  box-shadow: @box-shadow;
  padding: @container-padding;
  margin: 0 20px; /* 添加左右边距，防止在窄屏设备上太宽 */

  h1 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 24px; 
    border-left: 4px solid #409eff; 
    padding-left: 12px; 
  }
}

.modify-pwd-form {
  & > .el-form-item {
    margin-bottom: @form-item-margin;

    // 关键：强制标签不换行
    .el-form-item__label {
      color: #666;
      font-weight: 500;
      white-space: nowrap; // 核心属性，禁止文字换行
    }

    .el-input {
      width: 100%;

      .el-input__inner {
        height: @input-height;
        padding: 0 12px;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
        transition: all 0.3s;

        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 4px rgba(64, 158, 255, 0.2);
        }
      }
    }
  }

  .el-button {
    padding: @btn-padding;
    margin-right: 12px;
    border-radius: 4px;

    &:first-child {
      background-color: #409eff;
      border-color: #409eff;

      &:hover {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }
    }

    &:last-child {
      color: #666;
      border-color: #dcdcdc;

      &:hover {
        color: #409eff;
        border-color: #409eff;
      }
    }
  }
}
</style>
